<template>
	<el-container>
		<el-header>
			<el-menu :default-active="activeIndex" active-text-color="#d7000f" class="el-menu-demo" mode="horizontal"
				@select="handleSelect">
				<el-menu-item index="1">首页</el-menu-item>
				<el-menu-item index="2">AI创课</el-menu-item>
				<el-menu-item index="3">课程学习</el-menu-item>
				<el-menu-item index="4">在线考试</el-menu-item>
				<el-menu-item index="5">能力认证</el-menu-item>
				<el-menu-item index="6">Java训练营</el-menu-item>
				<el-menu-item index="7">交流社区</el-menu-item>
				<el-menu-item index="8">领航计划</el-menu-item>
				<el-menu-item index="9">消息中心</el-menu-item>
				<el-menu-item index="10"><a href="https://www.csdn.net/" target="_blank">csdn程序员社区</a></el-menu-item>
				<div class="header-container">
					<el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch"
						placeholder="请输入内容" @select="handleSelect">
						<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
						<template slot-scope="{ item }">
							<div class="name">{{ item.value }}</div>
							<span class="addr">{{ item.address }}</span>
						</template>
					</el-autocomplete>
					<div class="user-menu-container">
						<el-dropdown>
							<span class="el-dropdown-link">
								<el-avatar shape="square" :size="40" :src="squareUrl" class="user-avatar"></el-avatar>
								<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>个人中心</el-dropdown-item>
								<el-dropdown-item>学习中心</el-dropdown-item>
								<el-dropdown-item>修改密码</el-dropdown-item>
								<el-dropdown-item divided>退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>

			</el-menu>
		</el-header>
		<el-main>
			
		     <router-view></router-view>
		</el-main>
		<el-footer>Footer</el-footer>
	</el-container>
</template>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	html,
	body,
	#app,
	section,
	aside {
		height: 100%;
	}

	.header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
	}

	.user-menu-container {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.el-dropdown-link {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.user-avatar {
		margin-right: 5px;
		vertical-align: middle;
	}

	.el-menu-vertical-demo .el-menu-item:hover {
		color: #d7000f;
	}

	.el-menu-vertical-demo .el-submenu__title:hover {
		color: #d7000f;
	}

	.el-menu-vertical-demo .custom-active-item.is-active {
		color: black !important;
	}
</style>

<script>
	export default {
		data() {
			return {
				squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
				isCollapse: false,
				value:5
			}
		},
		methods: {
			changeCollapse() {
				this.isCollapse = !this.isCollapse;
			},
			goto(url) {
				this.$router.push(url)
			}
		}
	}
</script>